/* eslint no-unused-expressions: 0 */
import React, { Component } from 'react';
import { Dialog, Input, Select, Grid, Checkbox, Radio } from '@alifd/next';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import DialogDecorator from './DialogDecorator';
import { inspectionTypes, hoursConfig, weekDaysConfig, labelsConfig } from '../../../../conf/inspectionTypeConfig';

const { Col, Row } = Grid;

class FormDialog extends Component {
  constructor(props) {
    super(props);

    this.state = {
      visible: props.visible,
      value: props.value,
    };

    if(props.value.disable) {
      this.disable = true;
    }
  }

  onFormChange = (value) => {
    this.setState({
      value,
    });
  };

  onOkHandler = () => {
    this.refs.form.validateAll((errors, values) => {
      if (errors) {
        console.log('errors', errors);
        return;
      }
      this.props.onOk && this.props.onOk(this.state.value);
    });
  };

  onSelectAllHours(checked) {
    let value = this.state.value;
    value.hours = checked ? Array.from({length: 24}).map((ele, idx) => { return idx;}) : [];
    this.setState({
      value,
    });
  }

  onSelectAllWeekDays(checked) {
    let value = this.state.value;
    value.weekDay = checked ? Array.from({length: 7}).map((ele, idx) => { return idx + 1;}) : [];
    this.setState({
      value,
    });
  }

  render() {
    let showHours = false;
    let showWeekDays = false;
    inspectionTypes.forEach((ele, idx) => {
      if( this.state.value.type === ele.enName && ele.ftype === 'day') {
        showHours = true;
      } else if( this.state.value.type === ele.enName && ele.ftype === 'week') {
        showWeekDays = true;
      }
    });

    return (
      <Dialog
        isFullScreen={true}
        shouldUpdatePosition={true}
        // footer={!this.disable}
        className='equipment-control-dialog'
        title={this.disable ? "编辑数据" : "添加设备"}
        onClose={this.props.onClose}
        onCancel={this.props.onCancel}
        afterClose={this.props.afterClose}
        onOk={this.onOkHandler}
        visible={this.state.visible}
        style={{ width: 400, height: 'auto' }}
      >
        <IceFormBinderWrapper
          value={this.state.value}
          onChange={this.onFormChange}
          ref="form"
        >
          <div>
            <Row>
              <Col span={6}>
                <span style={styles.label}>设备类别</span>
              </Col>
              <Col span={18}>
                <IceFormBinder
                  required
                  name="scope"
                  message="必填"
                >
                  <Input
                    disabled={this.disable}
                    placeholder='设备类别'
                    style={styles.formField}
                    trim={true}
                  />
                </IceFormBinder>
                <IceFormError name="scope" />
              </Col>
            </Row>
            <Row style={styles.row}>
              <Col span={6}>
                <span style={styles.label}>设备明细</span>
              </Col>
              <Col span={18}>
                <IceFormBinder
                  name="equipmentname"
                  message="必填"
                >
                  <Input
                    disabled={this.disable}
                    placeholder='设备明细，可为空'
                    style={styles.formField}
                    trim={true}
                  />
                </IceFormBinder>
                <IceFormError name="equipmentname" />
              </Col>
            </Row>
            <Row style={styles.row}>
              <Col span={6}>
                <span style={styles.formLabel}>设备当前状态</span>
              </Col>
              <Col span={18}>
                <IceFormBinder
                  name="state"
                  required
                  message={"必选"}
                >
                  <Radio.Group
                    style={{
                      marginLeft: '8px',
                    }}
                    dataSource={[{
                      value: true,
                      label: '正常',
                    },{
                      value: false,
                      label: '故障'
                    }]}
                  />
                </IceFormBinder>
                <IceFormError name="radios" />
              </Col>
            </Row>
            <Row style={styles.row}>
              <Col span={6}>
                <span style={styles.label}>设备描述</span>
              </Col>
              <Col span={18}>
                <IceFormBinder
                  name="description"
                >
                  <Input
                    // disabled={this.disable}
                    placeholder='设备描述，可为空'
                    style={styles.formField}
                  />
                </IceFormBinder>
              </Col>
            </Row>
            <Row style={styles.row}>
              <Col span={6}>
                <span style={styles.label}>所属检查单</span>
              </Col>
              <Col span={18}>
                <IceFormBinder
                  required
                  name="type"
                  message="必选"
                >
                  <Select
                    disabled={this.disable}
                    style={styles.formField}
                    dataSource={
                      inspectionTypes.map((ele) => {
                        return {
                          value: ele.enName,
                          label: ele.name,
                        }
                      })
                    }
                  />
                </IceFormBinder>
                <IceFormError name="type" />
              </Col>
            </Row>
            {
              showHours &&
              <Row style={styles.row}>
                <Col span={6}>
                  <span style={styles.formLabel}>可能的状态</span>
                </Col>
                <Col span={18}>
                  <IceFormBinder
                    name="radios"
                    required
                    message={"必选"}
                  >
                    <Radio.Group
                      disabled={this.disable}
                      style={{
                        marginLeft: '8px',
                      }}
                      dataSource={[{
                        value: '无有',
                        label: '[无, 有]',
                      },{
                        value: '正常异常',
                        label: '[正常, 异常]'
                      }]}
                    />
                  </IceFormBinder>
                  <IceFormError name="radios" />
                </Col>
              </Row>
            }
            {
              showHours &&
              <Row style={styles.row}>
                <Col span={6}>
                  <span style={styles.label}>巡视时间</span>
                </Col>
                <Col span={18}>
                  <Checkbox
                    disabled={this.disable}
                    style={{ width: '200px', marginLeft: '8px' }}
                    label="全选整点时间"
                    onChange={this.onSelectAllHours.bind(this)}
                  />
                  <IceFormBinder
                    name="hours"
                  >
                    <Checkbox.Group
                      disabled={this.disable}
                      dataSource={hoursConfig}
                    />
                  </IceFormBinder>
                </Col>
              </Row>
            }
            {
              showWeekDays &&
              <Row style={styles.row}>
                <Col span={6}>
                  <span style={styles.formLabel}>值班班组</span>
                </Col>
                <Col span={18}>
                  <IceFormBinder
                    name="label"
                    required
                    message={"必选"}
                  >
                    <Radio.Group
                      disabled={this.disable}
                      style={{
                        marginLeft: '8px',
                      }}
                      dataSource={labelsConfig}
                    />
                  </IceFormBinder>
                  <IceFormError name="label" />
                </Col>
              </Row>
            }
            {
              showWeekDays &&
              <Row style={styles.row}>
                <Col span={6}>
                  <span style={styles.label}>巡视天数</span>
                </Col>
                <Col span={18}>
                  <Checkbox
                    disabled={this.disable}
                    style={{ width: '200px', marginLeft: '8px' }}
                    label="全选"
                    onChange={this.onSelectAllWeekDays.bind(this)}
                  />
                  <IceFormBinder
                    name="weekDay"
                  >
                    <Checkbox.Group
                      disabled={this.disable}
                      style={{
                        ...styles.formField,
                      }}
                      dataSource={weekDaysConfig}
                    />
                  </IceFormBinder>
                </Col>
              </Row>
            }
          </div>
        </IceFormBinderWrapper>
      </Dialog>
    );
  }
}

const styles = {
  row: {
    marginTop: '10px',
  },
  label: {
    lineHeight: '30px',
  },
  formField: {
    width: '100%',
  },
};

export default DialogDecorator(FormDialog);
